<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu
                :default-active="defaultActive"
                class="el-menu-vertical-demo"
                :unique-opened="true"
                @select="selectItem"
                background-color="#030E39"
                text-color="#2fd5ff"
                active-text-color="#f5dd17"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;业务数据统计</span>
                    </template>
                    <el-menu-item index="downloadNum">下载量统计</el-menu-item>
                    <el-menu-item index="watchNum">访问量统计</el-menu-item>
                    <el-menu-item index="userSta">用户统计</el-menu-item>
                    <el-menu-item index="dataTypeNum">数据类型统计</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-col>
    </el-row>
</template>
<script>
export default {
    name: 'SideBar',
    data() {
        return {
            shwoFPdm: 0,
            showSTHJdm: 0,
            showZRZYdm: 0,
            showSLdm: 0,
            showSWdm: 0,
            showLYdm: 0,
            defaultActive: '',
        };
    },
    methods: {
        selectItem(key, keyPath) {
            // 传给父组件的动态组件，动态加载对应组件
            console.log('key', key);
            this.$emit('changeCurrentComponents', key);
        },
        judgePower() {
            this.defaultActive = 'downloadNum';
            this.$emit('changeCurrentComponents', this.defaultActive);
        },
    },
    mounted() {
        this.judgePower();
    },
};
</script>
<style lang="scss" scoped>
.sidebar-container .is-active {
    color: #409eff;
}
.tac {
    text-align: left;
    .el-menu {
        border-right: 0 !important;
    }
    .business-data-management {
        width: 28px;
        height: 28px;
    }
}
</style>
